<template>
  <div class="user-wrapper">
    <canvas ref="artCanvas" class="art-canvas"></canvas>
    <div class="user-container">
      <h2>欢迎回来，{{ username }}！</h2>
      <div class="user-info">
        <p><strong>用户名:</strong> {{ username }}</p>
        <p><strong>注册时间:</strong> {{ registrationDate }}</p>
      </div>
      <button class="logout-btn" @click="handleLogout">退出登录</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'User',
  data() {
    return {
      username: '用户示例', // 模拟登录后的用户名，可从登录页面传递
      registrationDate: '2023-01-15' // 模拟数据，可从后端获取
    };
  },
  mounted() {
    const canvas = this.$refs.artCanvas;
    const ctx = canvas.getContext('2d');

    // 设置画布大小
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // 绘制艺术字背景，与 Login.vue 一致
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.font = 'bold 80px "Arial", sans-serif';
    ctx.fillStyle = 'rgba(163, 217, 163, 0.3)'; // 半透明淡绿色
    ctx.fillText('招聘实验室🧪', 5* canvas.width / 6, canvas.height / 10-10);
    ctx.font = 'italic 60px "Arial", sans-serif';
    ctx.fillStyle = 'rgba(102, 187, 106, 0.3)'; // 稍深的半透明绿色
    ctx.fillText('Joblab', canvas.width / 2, canvas.height / 2 + 30);
  },
  methods: {
    handleLogout() {

      if(confirm('您确认要退出登录吗?')){
        //退出时要清空用户数据
        localStorage.removeItem('user');



        //退出后要去到登录页
        //window.location.href = '/login';
        // 模拟退出逻辑，可替换为实际的登出请求
        this.$router.push('/login'); // 跳转回登录页面


        //也需要把已经取出来的user对象清空
        //user.value = '';
      }
    }
  }
};
</script>

<style scoped>
.user-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f7f0; /* 淡绿色背景，与 Login.vue 一致 */
  position: relative;
  overflow: hidden;
}

.art-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0; /* 背景层 */
}

.user-container {
  width: 100%;
  max-width: 400px;
  padding: 30px;
  background-color: #e6f3e6; /* 淡绿色容器背景 */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1; /* 确保在 canvas 上方 */
  text-align: center;
}

/* 圆点装饰，与 Login.vue 一致 */
.user-wrapper::before,
.user-wrapper::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #a3d9a3;
  border-radius: 50%;
  opacity: 0.5;
}

.user-wrapper::before {
  top: 20%;
  left: 10%;
}

.user-wrapper::after {
  bottom: 15%;
  right: 15%;
}

h2 {
  margin-bottom: 25px;
  color: #2e7d32; /* 深绿色标题 */
}

.user-info {
  margin-bottom: 20px;
  text-align: left;
}

.user-info p {
  margin: 10px 0;
  color: #388e3c; /* 绿色文本 */
}

.logout-btn {
  width: 100%;
  padding: 12px;
  background-color: #a3d9a3; /* 淡绿色按钮 */
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.logout-btn:hover {
  background-color: #81c784; /* 悬停时稍深绿色 */
}
</style>
